Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft.
View the full list of regular icons
View the full list of filled icons
DirectionWithin the metadata.json file for an icon, a property named directionType is used to indicate the direction of the icon. This property can have one of the following values:
unique, meaning that the icon is unique and has a specific RTL and LTR versionmirror, meaning that the icon can be mirrored for RTL or LTR languagesThe property singleton is also used to indicate the default direction that should be used for the icon.
InstallationAndroidThe library is published via Maven Central, please ensure that the mavenCentral() repository has been added to the root build.gradle file:
repositories {...mavenCentral()}Include the following dependency in your project's build.gradle:
implementation 'com.microsoft.design:fluent-system-icons:1.1.264@aar'For library docs, see android/README.md.
iOS and macOSCocoaPodsuse_frameworks!pod "FluentIcons", "1.1.264"Carthagegit "git@github.com:microsoft/fluentui-system-icons.git" "1.1.264"For library docs, see ios/README.md.
FlutterIn the pubspec.yaml of your flutter project, add the following dependency:
dependencies: ... fluentui_system_icons: ^1.1.264For library docs, see flutter/README.md.
Plain svgInline svg directly. See packages/svg-icons/README.md.
ContributingImporterThe importer generates the Android and iOS libraries from the icons in the assets directory.
Jump into the directory:
cd importerInstall npm dependencies:
npm installnpm run cleanList all the available commands:
npm runBuild PipelineOur build pipeline runs deploy:android and deploy:ios to create the libraries. The build definitions are located in .github/workflows/.
Demo appsYou can build and run the demo apps following the steps below.
AndroidFollow the Importer section above and run the command npm run deploy:androidOpen the android directory in Android StudioSelect the sample-showcase in the build configuration dropdownClick runFlutterPrerequisite: Make sure you have flutter configured in Android Studio
Open the flutter directory in Android StudioSelect the example in the directory and open it in Android StudioClick runContactPlease feel free to open a GitHub issue and assign to the following points of contact with questions or requests.
Jason Custer(@jasoncuster) / Spencer Nelson(@spencer-nelson) / Joe Woodward(@thewoodpecker) - DesignNick Romano(@rickromano) - iOSWill Hou(@willhou) - AndroidAkashdeep Singh(@aakash1313) - FlutterCode of ConductThis project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.